<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <router-link to="/asset">资产总览&nbsp;&nbsp;>&nbsp;</router-link>
        <span>充值</span>
      </p>
      <p class="p2">
        <span :class="rechargeType === 0 ? 'active' : ''" @click="rechargeType = 0">余额充值</span>
        <span :class="rechargeType === 1 ? 'active' : ''" @click="rechargeType = 1">USDT充值</span>
      </p>
      <div id="rechargeMoney" v-if="rechargeType === 0">
        <p class="clmTitle">选择币种</p>
        <p class="clm p2">
          <el-select v-model="selCoin" placeholder="请选择币种" class="leftValue">
            <el-option
              v-for="item in coins" :key="item.value" :value="item.value">
            </el-option>
          </el-select>
          <span class="rightMsg">可用余额：{{cnyMoney}} {{selCoin}}</span>
        </p>
        <p class="clmTitle">充值金额</p>
        <p class="clm p3">
          <input type="number" v-model="num" placeholder="请输入充值金额，限整数" class="leftValue default">
<!--          <span class="rightMsg">金额范围：400.00~10000000.00</span>-->
        </p>
        <p class="clmTitle">付款人姓名（银联支付不需填写）</p>
        <p class="clm p3">
          <input type="text" v-model="name" placeholder="请输入卡主姓名" class="leftValue default">
        </p>
        <p class="clmTitle payTitle">支付方式</p>
        <div class="d4">
          <span v-for="(item , index ) in channels" :class="item.value === SelChannel ? 'active' : ''" @click="clickPayType(item.value , index)">{{item.text}}</span>
        </div>
        <p class="p5">
          <button @click="recharge()">立即充值</button>
        </p>
      </div>
      <div id="rechargeUsdt" v-if="rechargeType === 1">
        <p class="p2">充币地址</p>
        <div class="d3">
          <span>
            <span class="address">{{address}}</span>
            <span class="hoverhand" :data-clipboard-text="address" id="copy1" @click="copyInfo('#copy1')">复制地址</span>
            <span id="showEwm">二维码</span>
            <span id="qrcode" ref="qrCodeUrl"></span>
          </span>
        </div>
        <p class="p4">
          <router-link to="/bill" class="hoverhand">查看账单</router-link>
        </p>
        <div class="d5">
          <p>提示</p>
          <div>
            1. 请勿向上述地址充值任何非USDT资产，否则资产将不可找回。<br>
            2. USDT充币仅支持simple send的方法，使用其他方法（sendall）的充币暂时无法上账，请您谅解。<br>
            3. 您充值至上述地址后，需要整个网络节点的确认，3 次网络确认后可上账。<br>
            4. 网络为BTC网络，即OMNI格式。<br>
            5. 最小充值金额：20 USDT ，小于最小金额的充值将不会上账且无法退回。<br>
            6. 您的充值地址不会经常改变，可以重复充值；如有更改，我们会尽量通过网站公告或邮件通知您。<br>
            7. 请务必确认电脑及浏览器安全，防止信息被篡改或泄露。
          </div>
        </div>
      </div>
    </section>
    <confirm-dialog ref="dl" v-bind:msg="safeInfo" @confirm="sure()" @cancel="cancel()"></confirm-dialog>
  </div>
</template>
<script>
  import {myAssets, ifNeedRechargeVerfy, payChannels, yinlianRecharge, usdtAddress, getPublicMes} from '../http/api';
  export default {
    name : 'recharge',
    data(){
      return{
        safeInfo: require('../common/jsons/text').relNameVerification.html,//实名安全提示文字
        rechargeType : 0,// cny , usdt类型
        cnyMoney : '',//cny余额
        selCoin : 'CNY', //选择的余额充值币种
        coins : [{value : 'CNY' }],//余额充值币种数组
        verFyCode : true,//是否实名
        channels : [],//支付渠道
        SelChannel : '',//默认选择支付渠道
        SelChannelIndex : 0,//默认选择支付渠道index
        name : '',//转款卡主
        num : '',//充值金额
        address : null ,//充币地址
      }
    },
    components:{
      ElSelect :  require('element-ui').Select, /*select*/
      ElOption : require('element-ui').Option, /*Option*/
      ConfirmDialog: resolve => { require(['../components/ConfirmDialog'], resolve) },/*确认弹窗*/
    },
    watch:{
      'rechargeType'( val ){
        if(val === 1 && !this.address){
          let thiz = this;
          usdtAddress({addressType: 'USDT_OMNI'}).then(res => {
            thiz.address = res.data.address;
            thiz.qrcode();
          });
        }
      }
    },
    mounted() {
      let thiz = this;
      let Not = {noToast : true , noLoading : true};
      let https = [
        myAssets(Not).then(res => {
          if(res.code == 200){
            let data = res.data.res;
            thiz.cnyMoney = data.cny.CNY ?  thiz.numSlice( data.cny.CNY.availableAssetConversion , 2) : 0;//cny余额
          }
        }),
        ifNeedRechargeVerfy(Not).then(res => {
          //判断是否需要实名
          if (res.code == 200) {
            thiz.verFyCode = res.data;
          } else {
            thiz.verFyCode = 2
          }
        }),
        payChannels(Not).then(res => {
          //获取支付渠道，并重新组装和排序
          if (res.code == 200) {
            let channels = res.data.channels;//支持支付方式
            for (let i = channels.length - 1; i >= 0; i--) {
              channels[i] = {
                value: channels[i]
              };
              switch (channels[i].value) {
                case 'BANK_TRANSFER':
                  channels[i].text = '对公转账';
                  break;
                case 'UNION_WEB':
                  channels[i].text = '银联支付';
                  break;
                case 'ALIPAY_TRANSFER':
                  channels[i].text = '支付宝对公转账';
                  break;
                // case 'YSF_WAP':
                //   channels[i].text = '银联支付';
                //   break;
                // case 'OTC_USDT':
                //   channels[i].text = 'OTC代充';
                //   break;
              }
            }
            thiz.SelChannel = channels[0].value;
            thiz.channels = channels;
          }
        })
      ];
      this.PromiseAll(https);
    },
    methods:{
      clickPayType(value , index){
        this.SelChannel = value;
        this.SelChannelIndex = index;
      },
      showVerify() {
        //显示校验弹窗
        this.$refs.dl.dialogShow();
      },
      sure() {
        //校验弹窗点击确定
        if (this.verFyCode === 2) {
          this.$router.push({path: '/relNameVerification'});
        }
      },
      cancel() {
        // if (this.verFyCode === 2) {
        //   this.$router.replace({path: '/entrance'})
        // }
      },
      recharge(){
        //点击充值余额
        if(this.verFyCode == 2) {
          this.showVerify();//显示实名弹窗
          return;
        }
        let num = this.num, //金额
          SelChannel = this.SelChannel, //充值方式
          name = this.name; //卡主
        let thiz = this;
        let errInfo = null; // 提示信息
        if(!num){
          errInfo = '请输入充值金额';
          require('../common/js/toast').toast(errInfo);
          return;
        }
        if( SelChannel === 'UNION_WEB'){
          //银联支付
          yinlianRecharge({amount:thiz.num}).then(res=>{
            if( res.code ==200){
              let url = res.data.url;
              if( thiz.SelChannel === 'UNION_WEB'){
                let div = document.createElement('div');
                div.setAttribute('style','height:0;width:0;overflow:hidden;');
                div.innerHTML = url;
                document.body.appendChild(div);
                document.getElementById('pay_form').submit();
              } else {
                window.location.href = url ;
              }
            }
          });
        }
        else{
          //对公转账
          if(!name){
            errInfo = '请输入卡主姓名';
          }
          if( errInfo ){
            require('../common/js/toast').toast(errInfo);
            return;
          }
          getPublicMes({ amount : thiz.num } ).then( res => {
            if( res.code == 200 ){
              thiz.$router.push({path : '/rechargePublic' , query : { channel : SelChannel , num : num}})
            }
          });
        }
      },
      copyInfo(id){
        require('../common/js/copy').copy({id: id , toast: '复制成功'});
      },
      qrcode(){//这里是调用的方法
        let thiz = this;
        this.$nextTick(()=>{
          let QRCode = require('qrcodejs2');
          new QRCode(thiz.$refs.qrCodeUrl, {
            text: thiz.address,
            width: 85,
            height: 85,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          });
        });
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  /deep/ .el-select .el-input{
    border-color: #EEEEEE;font-size: 16px;
  }
  #sec1{
    background: #fff;min-height: 725px;
    >.p2{
      padding-top: 55px;
      span{
        font-size: 18px;color: #999;padding-bottom: 10px;position: relative;display: inline-block;
        &:last-child{
          margin-left: 42px;
        }
        &:hover{
          cursor: pointer;
        }
        &.active{
          color: #262626;
          &:after{
            content: '';display: inline-block;width: 32px;height: 2px;.bgYellow;position: absolute;z-index: 1;left: 50%;margin-left: -16px;bottom: 0;
          }
        }
      }
    }
    #rechargeMoney{
      padding: 29px 0;
      .clmTitle{
        padding-top: 24px;padding-bottom: 15px;
        &:first-child{
          padding-top: 0;
        }
      }
      .clm{
        overflow: hidden;
        input.default{
          .input(40px , 464px);.placeholder;padding: 0 9px;
        }
        >.leftValue{
          float: left;
        }
        >.rightMsg{
          line-height: 40px;height: 40px;color: #666666;font-size: 14px;padding-left: 21px;
        }
      }
      .payTitle{
        padding-top: 44px;color: #262626;
      }
      >.p2{
        input , /deep/ input{
          .input;width: 464px;height: 40px;.borderRadius;padding: 0 9px;
        }
      }
      .d4{
        overflow: hidden;padding-right: 50px;
        >span{
          height: 40px;line-height: 40px;width: 235px;font-size:16px;.borderRadius;display: inline-block;text-align: center;
          color: #a9a7a7;border:1px solid #a9a7a7;margin-left: 17px;margin-top: 17px;
          &:nth-child(3n+1){
            margin-left: 0;
          }
          &:hover,&.active{
            cursor: pointer;.borderYellow;.colorYellow;
          }
        }
      }
      .p5{
        padding-top: 35px;
        button{
          .submit;width: 160px;font-size: 16px;height: 40px;line-height: 40px;
        }
      }
    }
    #rechargeUsdt{
      >.p2{
        color: #999;font-size: 14px;padding-top: 29px;
      }
      >.d3{
        padding-top: 18px;
        >span{
          position: relative;
          >.address{
            color: #262626;font-size: 20px;
          }
          >#copy1{
            .colorYellow;font-size: 16px;padding: 0 15px;padding-left: 30px;
          }
          >#showEwm{
            .colorYellow;font-size: 16px;padding: 0 15px;
          }
          >span{
            line-height: 25px;
          }
          #qrcode{
            position: absolute;z-index: 1;right: -10px;width: 85px;height: 85px;display: inline-block;top: 25px;
          }
        }
      }
      >.p4{
        padding-top: 31px;
        >a{
          .colorYellow;font-size: 14px;
        }
      }
      >.d5{
        color: #999;
        >p{
          font-size: 14px;padding-top: 24px;
        }
        >div{
          line-height: 185%;padding-top:10px;font-size: 14px;
        }
      }
    }
  }
</style>

